<template>
  <div class="common-layout">
     <el-container>
         <el-aside width="200px">
            <el-menu :default-openeds="['1', '3']">
           <el-sub-menu index="1">
               <template #title>
                  <div><el-icon><Location /></el-icon></div>第一部分
               </template>
           <el-menu-item-group>
                 <el-menu-item index="1-1">1</el-menu-item>
           <el-menu-item index="1-2">2</el-menu-item>
           </el-menu-item-group>
           
           <el-sub-menu index="1-3">
             <el-menu-item index="1-3-1">3-1</el-menu-item>
            </el-sub-menu>
            </el-sub-menu>


             <el-sub-menu index="2">
                   <template #title>
                   <el-icon><Menu/></el-icon>
                  第二部分
                   </template>
                     <el-menu-item-group>
                        <el-menu-item index="2-1">1</el-menu-item>
                        <el-menu-item index="2-2">2</el-menu-item>
                     </el-menu-item-group>
                       </el-sub-menu>
                     <el-sub-menu index="3">
                          <template #title>
                     <el-icon><Document/></el-icon>
                   第三部分
                  </template>
                 </el-sub-menu>
               <el-sub-menu index="4">
                <template #title>
               <el-icon><Setting/></el-icon>
                   第四部分
                  </template>
               </el-sub-menu>
               </el-menu> 

              </el-aside> 
                
               <el-container>
                <el-header><h3>第一个使用布局的页面</h3></el-header>
                 <el-main> <FristHello /></el-main>
                    <el-footer>
                       web实战课程版权所有
                     <el-button>
                      <el-icon circle type="info"  @click="open">
                       <InfoFilled/>
                      </el-icon> 
                      
                    <el-footer>
                             web实战课程版权所有
                     <el-button>
                        <el-icon circle type="info"  @click="open">
                        <InfoFilled/>
                       </el-icon>
                      </el-button>
                     </el-footer>
          </el-container> 
           </el-container>
   </div>
</template>

<script>
import {Location,Menu,Document,Setting,InfoFilled}from'@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import FristHello from'./FristHello.vue'
export default {
     components:{
        Location,
        Menu,
        Document,
        Setting, 
        InfoFilled,FristHello
   },
    methods:{
        open(){
            ElMessage('版权所有不可侵犯,联系方式xxxxxxxxx')
        }
    }
}
</script>

<style>
.el-header,.el-footer{
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 20px;
}
ul {
  list-style-type: none;
  padding: 0;
}
.el-aside{
     background-color: #b3dce6;
     text-align: center;
     line-height: 200px;
}
.el-main{
    background-color: #e9eef3;
    text-align: center;
}
</style>